<template>
  <div class="settings">
    <!-- 页面主体 -->
    <v-main>
      <div class="page_name">
        <span class="title">设置</span>
      </div>
      <div class="compass-tabs">
        <el-tabs v-model="tabName">
          <!-- tab - 门店管理 -->
          <el-tab-pane label="门店管理" name="storesTab">
            <v-stores-tab></v-stores-tab>
          </el-tab-pane>
          <!-- tab - 查看权限 -->
          <el-tab-pane label="角色权限" name="rightsTab">
            <v-rights-tab></v-rights-tab>
          </el-tab-pane>
          <!-- tab - 账号管理 -->
          <el-tab-pane label="账号管理" name="accountTab">
            <v-account-tab></v-account-tab>
          </el-tab-pane>
        </el-tabs>
      </div>
    </v-main>
  </div>
</template>
<script type="text/ecmascript-6">
// components
import MainComp from '@/components/main'
// import EchartComp from '@/components/echarts'
// 图标的配置文件
// import activenessEchartOption from './activenessEchartOption.js'

// element-ui
import { Row, Col, DatePicker, Tooltip, Tabs, TabPane, Table, TableColumn, Button, Tree, Input } from 'element-ui'

// page functional module
import StoresTab from './component/storesTab.vue'
import RightsTab from './component/rightsTab.vue'
import AccountTab from './component/accountTab.vue'
// api

/**
 * Parse, validate, manipulate, and display dates in javascript
 * @Documents http://momentjs.com/
 */
// import Moment from 'moment'
// import Config from '@/utils/config.js'

export default {
  name: 'settings',

  components: {
    // elementUI component
    elRow: Row,
    elCol: Col,
    elButton: Button,
    elDatePicker: DatePicker,
    elTooltip: Tooltip,
    elTabs: Tabs,
    elTabPane: TabPane,
    elTable: Table,
    elTableColumn: TableColumn,
    elTree: Tree,
    elInput: Input,
    // 项目自定义组件
    vMain: MainComp,
    // 功能模块
    vStoresTab: StoresTab,
    vRightsTab: RightsTab,
    vAccountTab: AccountTab
  },

  created () {
    // init request
    let tabName = this.$route.query.tabName
    this.tabName = tabName === undefined ? 'storesTab' : tabName
  },
  data () {
    return {
      tabName: null
    }
  },

  computed: {
  },

  methods: {
  }
}
</script>

<style lang="less" rel="stylesheet/less">
  .settings {
    box-sizing: border-box;
    padding: 20px;
    width: 100;
    background-color: #FFF;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .2);
    .page_name {
      margin-bottom: 10px;
      .title{
        font-weight: bold;
        font-size: 18px;
      }
    }
  }
</style>
